<template>
		<page-meta :root-font-size="fontSizeStore.currentFontSizeRpx"></page-meta>
	<view class="elderly-service-page">
		<!-- 选项卡 -->
		<view class="button-container">
			<!-- 超市按钮 -->
			<wd-button class="market-button" type="default" @click="selectButton({
			name:'common_pointsSupermarket',
			params:{
				name:'shenghuo_lei',
				title:'生活类'
			}
		})" plain>
				生活类
			</wd-button>
			<!-- 超市按钮 -->
			<wd-button class="market-button" type="default" @click="selectButton({
  	name:'common_pointsSupermarket',
  	params:{
  		name:'yiri_cansan',
		title:'一日三餐'
  	}
  })" plain>
				一日三餐
			</wd-button>

		</view>

		<!-- 内容容器（去除多余内边距） -->
		<view class="content-container">
			<!-- 页面标题 -->
			<view class="page-header">
				<text class="page-title">养老服务项目</text>
			</view>

			<!-- 服务列表（Grid布局） -->
			<view class="service-grid">
				<view class="service-item" v-for="service in serviceList" :key="service.id">
					<!-- 左侧图片区域 -->
					<view class="item-img-wrap">
						<image :src="fixedImgUrl" mode="aspectFill" class="item-img" lazy-load="true"></image>
					</view>

					<!-- 右侧信息区域 -->
					<view class="item-info-wrap">
						<!-- 服务名称 -->
						<text class="item-name">{{ service.name }}</text>

						<!-- 价格信息（带底部border） -->
						<view class="item-price">
							<text class="price-sign">¥</text>
							<text class="price-num">{{ service.price }}</text>
							<text class="price-unit">/{{ service.unit }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	
	import {
			useRouter
		} from 'uni-mini-router'
		
		import {
			useFontSizeStore
		} from '@/stores/fontSizeStore';
		import {
			useTabStore
		} from '@/stores/tabs'
		
		const fontSizeStore = useFontSizeStore();
			const tabStore = useTabStore()
			const router = useRouter();
	

	// 选中的按钮状态
	const selectedButton = ref('market') // 默认选中超市

	// 切换按钮选中状态
	const selectButton = (item) => {
		// selectedButton.value = type
		router.push(item)
	}

	// 统一图片URL（用户指定）
	const fixedImgUrl = ref('https://img1.sycdn.imooc.com/szimg/5fcdf622090957ef05400304.jpg')

	// 服务列表数据
	const serviceList = ref([{
			id: 101,
			name: '居家上门护理',
			price: 120,
			unit: '小时'
		},
		{
			id: 102,
			name: '老年健康体检',
			price: 380,
			unit: '次'
		},
		{
			id: 103,
			name: '康复理疗训练',
			price: 90,
			unit: '次'
		},
		{
			id: 104,
			name: '营养老年餐配送',
			price: 35,
			unit: '餐'
		},
		{
			id: 105,
			name: '陪同就医服务',
			price: 150,
			unit: '次'
		},
		{
			id: 106,
			name: '老年大学课程',
			price: 1200,
			unit: '月'
		},
		{
			id: 107,
			name: '家政清洁服务',
			price: 80,
			unit: '小时'
		},
		{
			id: 108,
			name: '心理疏导咨询',
			price: 100,
			unit: '小时'
		},
		{
			id: 109,
			name: '助浴助行服务',
			price: 60,
			unit: '次'
		}
	])
</script>

<style lang="less" scoped>
	.elderly-service-page {
		// padding: 20rpx 16rpx; /* 减小页面整体边距 */
		background-color: #f5f7fa;
		min-height: 100vh;
	}

	.button-container {
		display: flex;
		gap: 16rpx; // 按钮之间的间距
		padding: 50rpx;
		justify-content: center;
		background-color: #f5f7fa;
	}



	// 按钮样式
	.market-button {
		flex: 1; // 按钮平均分配宽度
		height: 80rpx;
		font-size: 32rpx;

		border-radius: 40rpx; // 圆角按钮


		// 未选中选中状态样式
		&::v-deep.wd-button--default {
			background-color: #fff;
			color: #333;
			border: 2rpx solid #eee;

			&:active {
				background-color: #f5f5f5;
			}
		}

		// 选中状态样式
		&::v-deep.wd-button--primary {
			background-color: #0658ec;
			color: #fff;
			border: none;

			&:active {
				background-color: #0547c0;
			}
		}

		// 镂空样式调整
		&::v-deep.wd-button--plain {
			border-color: #ddd;
			color: #666;
		}
	}

	.content-container {
		// background: #fff;
		// border-radius: 16rpx; /* 保留容器圆角但移除阴影 */
		padding: 0rpx 20rpx;
		/* 减小容器内边距 */
	}

	.page-header {
		margin-bottom: 24rpx;
		/* 减小标题与列表的间距 */

		.page-title {
			font-size: 32rpx;
			/* 减小标题字体 */
			font-weight: 600;
			color: #333;
			letter-spacing: 0.5rpx;
		}
	}

	/* Grid布局核心 */
	.service-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		/* 两列等宽 */
		gap: 20rpx;
		/* 列/行间距统一为20rpx */
	}

	.service-item {
		background: #fff;
		padding: 15rpx;
		// border-radius: 12rpx; /* 保留项圆角但移除阴影 */
		overflow: hidden;
		display: grid;
		grid-template-columns: 40% 60%;
		/* 图片:信息 = 4:6 */
		height: 120rpx;
		/* 增大项高度提升视觉舒适度 */
		transition: transform 0.2s;
		border-radius: 20rpx;
	}

	/* 图片区域 */
	.item-img-wrap {
		width: 100%;
		height: 100%;
		position: relative;
		background: #f8f8f8;
		/* 图片加载前背景色 */
		overflow: hidden;
	}

	.item-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 保持比例覆盖 */
		border-radius: 20rpx;
	}

	/* 信息区域 */
	.item-info-wrap {
		width: 100%;
		padding: 12rpx 16rpx;
		/* 调整内边距 */
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		/* 名称/价格上下分布 */
		gap: 4rpx;
		/* 名称与价格间距 */
	}

	.item-name {
		font-size: 26rpx;
		/* 调整名称字体 */
		color: #333;
		font-weight: 500;
		line-height: 1.3;
		/* 调整行高 */
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		/* 限制一行 */
		-webkit-box-orient: vertical;
	}

	/* 价格信息（带底部border） */
	.item-price {
		display: inline-flex;
		align-items: baseline;
		font-size: 24rpx;
		/* 调整价格字体 */
		color: #ff7d00;
		// border-bottom: 1rpx solid #eee; /* 添加浅色底部border */

		.price-sign {
			font-size: 22rpx;
			margin-right: 2rpx;
		}

		.price-num {
			font-size: 26rpx;
			font-weight: 600;
			margin-right: 4rpx;
		}

		.price-unit {
			font-size: 22rpx;
			color: #666;
		}
	}
</style>